<template>
  <div id="myLogin">
    <el-dialog
      title="登录"
      width="300px"
      center
      :visible.sync="isLogin"
      class="demo-ruleForm"
    >
      <el-form :model="LoginUser" :rules="rules" status-icon ref="ruleForm">
        <el-form-item prop="account">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="请输入用户名"
            v-model="LoginUser.account"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="LoginUser.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            size="medium"
            type="primary"
            @click="Login"
            style="width:100%;"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  name: 'MyLogin',
  data() {
    // 用户名的校验方法
    let validateAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入用户名'))
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const accountRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
      if (accountRule.test(value)) {
        this.$refs.ruleForm.validateField('checkPass')
        return callback()
      } else {
        return callback(new Error('字母开头,长度5-16之间,允许字母数字下划线'))
      }
    }
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入密码'))
      }
      // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
      const passwordRule = /^[a-zA-Z]\w{5,17}$/
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField('checkPass')
        return callback()
      } else {
        return callback(new Error('字母开头,长度6-18之间,允许字母数字和下划线'))
      }
    }
    return {
      LoginUser: {
        account: '',
        password: ''
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        account: [{ validator: validateAccount, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }]
      }
    }
  },
  created() {
    // 获取浏览器localStorage，判断用户是否已经登录
    if (localStorage.getItem('mall_user')) {
      // 如果已经登录，设置vuex登录状态
      this.setUser(JSON.parse(localStorage.getItem('mall_user')))
      console.log('已登陆')
    }
  },
  computed: {
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin
      },
      set(val) {
        this.$refs['ruleForm'].resetFields()
        this.setShowLogin(val)
      }
    }
  },
  methods: {
    ...mapActions(['setUser', 'setShowLogin']),
    Login() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs['ruleForm'].validate(valid => {
        //如果通过校验开始登录
        if (valid) {
          this.$http({
            url: this.$http.adornUrl('/member/user/login'),
            method: 'post',
            data: this.$http.adornData({
              account: this.LoginUser.account,
              password: this.LoginUser.password
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              // token信息存在cookie中
              this.$cookie.set('mall_token', data.mall_token)
              // 获取登录信息存到本地
              let mall_user = JSON.stringify(data.mall_user)
              localStorage.setItem('mall_user', mall_user)
              // 登录信息存到vuex
              this.setUser(data.mall_user)
              // 重新加载当前页面
              // window.location.reload()
              // 隐藏登录组件
              this.isLogin = false
            } else {
              // 清空输入框的校验状态
              this.$refs['ruleForm'].resetFields()
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style></style>
